import { observer } from 'mobx-react-lite';
import { Button, Form, Input, Radio, Toast } from 'esy-ui';
import { Header, Img } from '@/components';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { form_ipt_com_1 } from '@/styles/esy-ui';
import { useFormatText } from '@/hooks';
import { postUpdateUserInfo } from '@/services';
import QuickNav from '../quick-nav';
import RealNameIcon from '@/components/icon/RealName';
import NickNameIcon from '@/components/icon/NickName';
import BirthdayIcon from '@/components/icon/Birthday';

const FormItem = Form.Item;

const data = [
  { text: 'text_104', value: '0' },
  { text: 'text_105', value: '1' },
  { text: 'text_106', value: '2' },
];

function Info() {
  const { userInfo } = useUserInfoStore();
  const { changeState } = useGlobalStore();
  const { text } = useFormatText();
  const [form] = Form.useForm();

  // 更新用户信息
  const onSubmit = () => {
    changeState('isLoading', true);
    form
      .validate()
      .then((values) => {
        console.info(values);
        if (Object.values(values).some((it) => !it)) {
          Toast.show({ content: text('text_88') });
          changeState('isLoading', false);
        } else {
          postUpdateUserInfo({ ...values, Gender: Number(values.Gender) })
            .then(() => {
              Toast.show({ content: text('text_107') });
            })
            .catch(() => {
              Toast.show({ content: text('text_108') });
            })
            .finally(() => {
              changeState('isLoading', false);
            });
        }
      })
      .catch(() => {
        changeState('isLoading', false);
      });
  };

  return (
    <div className='bg-white w-full h-full flex flex-col'>
      <Header title='text_91' isGoHome />
      <QuickNav />
      <div className='px-4 py-3 flex flex-col flex-1'>
        <Img boxClassName='w-16 h-16 rounded-half bg-desc my-4' src={userInfo.HeadImg} />
        <div className='text-base my-3'>
          {text('username')}：{userInfo?.Account}
        </div>
        <Form form={form} className='py-3'>
          <div className='flex-1 relative'>
            <FormItem className='mb-5' name='RealName' initialValue={userInfo.Name}>
              <Input classNames={form_ipt_com_1} placeholder={text('please_realname')} prefix={<RealNameIcon className='absolute left-3' />} />
            </FormItem>
            <FormItem className='mb-5' name='NickName' initialValue={userInfo.NickName}>
              <Input classNames={form_ipt_com_1} placeholder={text('text_179')} prefix={<NickNameIcon className='absolute left-3' />} />
            </FormItem>
            <FormItem className='mb-5' name='BirthDate' initialValue={userInfo.BirthDate}>
              <Input classNames={form_ipt_com_1} placeholder={text('text_180')} prefix={<BirthdayIcon className='absolute left-3' />} />
            </FormItem>
            <FormItem name='Gender' formlabel={text('text_103')} initialValue={`${userInfo.Gender}`}>
              <Radio.Group type='radio'>
                {data.map((it) => (
                  <Radio key={it.value} label={text(it.text)} value={it.value} />
                ))}
              </Radio.Group>
            </FormItem>
          </div>
          <Button className='rounded mt-8 self-end' htmltype='submit' onClick={onSubmit}>
            {text('text_93')}
          </Button>
        </Form>
      </div>
    </div>
  );
}

export default observer(Info);
